<template>

	<div class="home">
		<van-search  shape="round" background="#aaaaff" placeholder="请输入搜索关键词" />
		<!-- 首页轮播 -->
		<home-swipe :carouselItems="carouselItems"></home-swipe>
		<!-- 首页功能快捷入口 Grid宫格 -->
		<home-enter></home-enter>
		<!-- 商品推荐 -->
		<home-product :productItems="recommendedItems" title="商品推荐" :icon="'gem-o'"></home-product>
		<!-- 新品上架 -->
		<home-product :icon="'gift-o'" :productItems="newArrialItems" title="新品上架"></home-product>

		<!-- 销售排行 -->
		<!-- <home-product :icon="'send-gift-o'" :productItems="topSaleItems" title="销售排行"></home-product> -->
	</div>
</template>
<script>
	//导入封装后的首页接口
	import {
		getCarouseDataAPI,
		getProViewDataAPI
	} from "@/api/home.js"
	import HomeSwipe from "./components/HomeSwipe.vue"
	import HomeEnter from "./components/HomeEnter.vue"
	import HomeProduct from "./components/HomeProduct.vue"
	export default {
		name: 'home',
		components: {
			HomeSwipe,
			HomeEnter,
			HomeProduct
		},
		data() {
			return {
				carouselItems: [], //轮播图
				recommendedItems: [], //商品推荐        
				newArrialItems: [], //新品上架      
				// topSaleItems: [], //销售排行     
			}
		},
		// 生命周期钩子-实例创建后,可以用this.*
		created() {
			//2.使用封装后的接口
			getCarouseDataAPI().then(result => {
				console.log(result); //控制台调式输出
				this.carouselItems = result.data; //保存API调用的返回的轮播数据                
			});
			getProViewDataAPI().then(result => {
				console.log(result); //控制台调式输出
				let i=0
				result.data.forEach(item=>{
					if(i%2==0){
						this.recommendedItems.push(item); //保存首页商品推荐数据 
					}else{
						this.newArrialItems.push(item); 
					}
					
					i++
				})
				
			});
			// getProViewDataAPI().then(result => {
			// 	console.log(result); //控制台调式输出
			// 	this.newArrialItems = result.data; //保存首页新品上架数据             
			// });
		},
	}
</script>
<style scoped>
</style>
